<template>
	<view class="pageBox">
		<view class="topHeadBox">
			<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
				<image class="back" src="http://www.bobei.shop/static/back.png" @click="goBack"></image>
				<view class="title">
					发表评价
				</view>
			</view>

			<!-- 占位用 -->
			<!--  #ifdef  MP-WEIXIN	 -->
			<view class="space" :style="{height: statusBarHeight + 50 + 'px',}"></view>
			<!--  #endif -->
			<!--  #ifndef  MP-WEIXIN	 -->
			<view class="space"></view>
			<!--  #endif -->


			<view class="uploadBox flex">
				<view class="uploadItem">
					<view class="imgTitle">
						请选择视频
					</view>
					<!-- 传视频 -->
					<uni-file-picker fileMediatype="video" mode="grid" limit="1" @select="selectVideo"
						@delete="deleteVideo">
						<view class="videoBox flex-center">
							<view class="videoText" v-if="!videoValue">
								选择视频
							</view>
							<video class="videoObj" :controls="true" :src="videoValue" v-if="videoValue"></video>
						</view>
					</uni-file-picker>
				</view>

				<view class="uploadItem">
					<view class="imgTitle">
						请选择图片
					</view>
					<uni-file-picker fileMediatype="image" mode="grid" limit="8" @select="selectImg" @delete="deleteImg"
						:image-styles="imageStyles" />
				</view>
			</view>
		</view>


		<view class="evaluation">
			<!-- <view class="sign flex">
				<view class="signItem">
					产品功能
				</view>
				<view class="signItem">
					产品材质
				</view>
				<view class="signItem">
					商品材质
				</view>
			</view> -->

			<textarea class="evaluate" placeholder="谈谈您对于商品的想法吧......" :maxlength="140" v-model="evaluate" />
		</view>


		<view class="comment">
			<view class="commentTitle">
				宝贝综合评述
			</view>
			<view class="commentItem flex-row">
				<view class="commentItemL">
					描述相符
				</view>
				<uni-rate allow-half :value="description" color="#D9D9D9" active-color="#EC615C"
					@change="descriptionChange" />
			</view>

			<view class="commentItem flex-row">
				<view class="commentItemL">
					物流服务
				</view>
				<uni-rate allow-half :value="logistics" color="#D9D9D9" active-color="#EC615C"
					@change="logisticsChange" />
			</view>

			<view class="commentItem flex-row">
				<view class="commentItemL">
					服务态度
				</view>
				<uni-rate allow-half :value="service" color="#D9D9D9" active-color="#EC615C" @change="serviceChange" />
			</view>
		</view>

		<button class="completeBtn" :plain="true" @click="onCompleteBtn">
			<view class="lineBox flex">
				<view class="line"></view>
				<view class="line2"></view>
			</view>
			发布
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",

				id: "",
				info: {},

				videoValue: "",

				imageValue: [],
				imageStyles: {
					width: 97,
					height: 97,
					border: {
						color: "transparent",
						width: 0,
						style: 'dashed',
						radius: '0rpx'
					}
				},

				evaluate: "",

				description: 0,
				logistics: 0,
				service: 0,

			}
		},
		onLoad(option) {
			this.statusBarHeight = this.$mySysInfo().top;
			this.id = option.id;
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			onCompleteBtn() {
				if (!this.description) {
					uni.showToast({
						title: '请对描述相符进行评分',
						duration: 1500,
						icon: 'none',
					});
					return
				}
				if (!this.logistics) {
					uni.showToast({
						title: '请对物流服务进行评分',
						duration: 1500,
						icon: 'none',
					});
					return
				}
				if (!this.service) {
					uni.showToast({
						title: '请对服务态度进行评分',
						duration: 1500,
						icon: 'none',
					});
					return
				}
				this.$post({
					url: '/portal/Shop',
					module: 'Comment',
					interface: 1000,
					data: {
						id: Number(this.id),
						goodsId: Number(this.info.goodsId),
						commentId: "",
						miaoshu: this.description,
						wuliu: this.logistics,
						fuwu: this.service,
						content: this.evaluate,
						images: this.imageValue,
						video: this.videoValue,

					}
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						this.goBack();
					}, 1000)
				})
			},
			getInfo() {
				this.$post({
					url: '/portal/Shop',
					module: 'Order',
					interface: '1001',
					data: {
						id: Number(this.id)
					}
				}).then(res => {
					this.info = res;
				})
			},
			// 获取上传状态
			selectVideo(e) {
				// console.log('选择文件：', e)
				this.$upload({
					data: {
						filePath: e.tempFilePaths[0]
					}
				}).then((res) => {
					// console.log("视频:", res);
					this.videoValue = res.file;
				}).catch((error) => {
					// console.log("上传error：", res);
				})
			},
			// 删除
			deleteVideo(e) {
				// console.log("删除:", e);
				this.videoValue = "";
			},

			// 获取上传状态
			selectImg(e) {
				// // console.log('选择文件：', e);
				this.$upload({
					data: {
						filePath: e.tempFilePaths[0]
					}
				}).then((res) => {
					let obj = {
						payImg: res.file,
						tempFilePath: e.tempFilePaths[0],
					}
					this.imageValue.push(obj.payImg);
					// console.log("imageValue:", this.imageValue);
				}).catch((error) => {
					// console.log("上传error：", res);
				})
			},
			// 文件从列表移除时触发
			deleteImg(e) {
				// // console.log('文件从列表移除时触发：', e);
				this.imageValue.forEach((item, index) => {
					if (item.tempFilePath === e.tempFilePath) {
						this.imageValue.splice(index, 1);
					}
				})
			},

			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			descriptionChange(e) {
				// console.log('descriptionChage发生改变:' + JSON.stringify(e));
				this.description = e.value;
			},
			logisticsChange(e) {
				// console.log('logisticsChange发生改变:' + JSON.stringify(e));
				this.logistics = e.value;
			},
			serviceChange(e) {
				// console.log('serviceChange发生改变:' + JSON.stringify(e));
				this.service = e.value;
			},
		},

	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;

		background: #F7F6FC;

		.topHeadBox {
			width: 100%;
			min-height: 454rpx;
			background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
			background-size: 100% 390rpx;
			background-repeat: no-repeat;
			position: relative;

			.topHead {
				background: transparent;
				height: 88rpx;
				width: 100%;
				padding: 0 32rpx;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 3;

				.back {
					width: 36rpx;
					height: 36rpx;
				}

				.title {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					position: absolute;
					top: 22rpx;
					left: 50%;
					transform: translate(-50%, 0);
				}
			}

			.space {
				width: 100%;
				height: 200rpx;

			}

			.uploadBox {
				width: 690rpx;
				min-height: 254rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				flex-wrap: wrap;
				padding: 30rpx;
				margin: 0 auto;

				.uploadItem {
					.videoBox {
						width: 194rpx;
						height: 194rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.3);

						.videoText {
							color: #000000;
							font-size: 28rpx;
						}

						.videoObj {
							width: 194rpx;
							height: 194rpx;
						}
					}

					.imgTitle {
						color: #000000;
						font-size: 28rpx;
						font-weight: bold;
						margin: 30rpx 0;
					}

					/deep/.file-picker__box {
						box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.3);
					}
				}
			}
		}

		.evaluation {
			width: 690rpx;
			height: 414rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx auto 0;
			padding: 38rpx 26rpx;

			.sign {
				margin-bottom: 32rpx;

				.signItem {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #EEAC80;
					padding: 8rpx 12rpx 6rpx;
					background: #FFE1D5;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 20rpx;
				}
			}

			.evaluate {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}

		.comment {
			width: 690rpx;
			height: 328rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx auto 0;
			padding: 38rpx 26rpx;

			.commentTitle {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.commentItem {
				margin-top: 24rpx;

				.commentItemL {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					margin-right: 32rpx;
				}
			}
		}

		.completeBtn {
			width: 630rpx;
			height: 100rpx;
			background: #F2615F;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 0;
			margin: 96rpx auto 0;
			border: none;
			position: relative;

			.lineBox {
				position: absolute;
				top: 12rpx;
				left: 42rpx;

				.line {
					width: 17rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
				}

				.line2 {
					width: 55rpx;
					height: 3rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
					margin-left: 6rpx;
				}
			}
		}
	}
</style>
